<!-- 学生注册 -->

<template>
  <div class="wrapper">
    <div class="register-box">

      <label id="back" @click="$router.push('/StuLogin')">
        <i class="el-icon-back"></i>
        <span>返回</span>
      </label>

      <div class="register-title">
        <b>学生注册</b>
      </div>

      <el-form ref="student" :model="student" :rules="rules" status-icon style="width: 80%;margin: 0 auto">
        <label>
          <i class="el-icon-user"></i><span>用户名：</span>
          <el-form-item prop="username">
            <el-input v-model="student.username" autocomplete="off" clearable placeholder="请输入用户名" size="medium"
                      style="margin: 5px 0"></el-input>
          </el-form-item>
        </label>
        <label>
          <i class="el-icon-lock"></i><span>密码：</span>
          <el-form-item prop="password">
            <el-input v-model="student.password" autocomplete="off" clearable placeholder="请输入密码" show-password
                      size="medium"
                      style="margin: 5px 0" type="password"></el-input>
          </el-form-item>
        </label>
        <label>
          <i class="el-icon-lock"></i><span>确认密码：</span>
          <el-form-item prop="password2">
            <el-input v-model="student.password2" autocomplete="off" clearable placeholder="请再次输入密码" show-password
                      size="medium"
                      style="margin: 5px 0" type="password"></el-input>
          </el-form-item>
        </label>
      </el-form>

      <div style="margin: 30px 0;text-align: center">
        <el-button autocapitalize="off" size="medium" type="primary" @click="Register">注册</el-button>
        <el-button autocapitalize="off" size="medium" style="margin-left: 30px" type="success"
                   @click="resetForm">重置
        </el-button>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  name: "StuRegister",
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.student.password2 !== '') {
          this.$refs.student.validateField('password2');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.student.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      student: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 1, max: 8, message: '用户名不能超过8个字符', trigger: 'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        password2: [
          {validator: validatePass2, trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    Register() {
      this.$refs['student'].validate((valid) => {
        if (valid) {
          this.request.post("/student/sRegister", this.student).then(res => {
            if (res.code === "code_200") {
              this.$router.push("/StuRegisterSuccess")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    resetForm() {
      this.$refs['student'].resetFields()
    }
  }
}
</script>
<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background-image: url('../assets/bj_2.jpg');
  background-size: cover;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.register-box {
  margin: 150px auto;
  width: 350px;
  height: 410px;
  padding: 20px;
  border-radius: 10px;
  background: rgba(223, 219, 219, 0.2);
  box-shadow: 0 25px 35px rgba(0, 0, 0, 0.8);
}

#back:hover {
  color: #80bdff;
}

label:hover {
  color: #a300ff;
}

.register-title {
  margin: 5px 0 20px 0;
  text-align: center;
  font-size: 24px;
}

.register-title b {
  color: rgb(0, 0, 0);
  text-shadow: 2px 8px 6px rgba(124, 112, 112, 0.2), 0 -5px 35px rgb(255, 255, 255);
  background-image: linear-gradient(to right bottom, #2424ff, #ff6200); /* 线性渐变背景，方向向上 */
  -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
  -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
}
</style>